<template>
  <div class="home-layout">
    <!-- 顶部导航栏 -->
    <header class="top-header">
      <div class="header-left">
        <div class="logo">ERP&MES</div>
        <nav class="main-nav">
          <div v-for="item in mainMenus" :key="item.key" class="nav-item"
            :class="{ active: activeMainMenu === item.key }" @click="handleMainMenuClick(item.key)">
            {{ item.label }}
          </div>
        </nav>
      </div>
      <div class="header-right">

        <div class="user-info">
          <div class="logout-btn" @click="handleLogout">
            <span class="logout-icon">⏏</span>
            <span class="logout-text">退出系统</span>
          </div>
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- 左侧菜单栏 -->
      <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-header">
          <button class="collapse-btn" @click="toggleSidebar">
            {{ sidebarCollapsed ? '▶' : '◀' }}
          </button>
        </div>

        <div class="sidebar-content">
          <div v-if="activeMainMenu && subMenus[activeMainMenu]" class="menu-section">
            <div v-for="item in subMenus[activeMainMenu]" :key="item.key" class="menu-item" :class="{
              active: activeSubMenu === item.key,
              expanded: expandedMenus.includes(item.key)
            }" @click="handleSubMenuClick(item)">
              <div class="menu-item-content">
                <span class="menu-icon">{{ item.icon }}</span>
                <span v-if="!sidebarCollapsed" class="menu-label">{{ item.label }}</span>
                <span v-if="!sidebarCollapsed && item.children" class="menu-arrow">
                  {{ expandedMenus.includes(item.key) ? '▼' : '▶' }}
                </span>
              </div>

              <!-- 子菜单 -->
              <div v-if="item.children && expandedMenus.includes(item.key) && !sidebarCollapsed" class="submenu">
                <div v-for="child in item.children" :key="child.key" class="submenu-item"
                  :class="{ active: activeSubMenu === child.key }" @click.stop="handleSubMenuClick(child)">
                  <span class="submenu-label">{{ child.label }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content">
        <div class="content-header">
          <div class="breadcrumb">
            <span>首页</span>
            <span v-if="activeMainMenuLabel"> > {{ activeMainMenuLabel }}</span>
            <span v-if="activeSubMenuLabel"> > {{ activeSubMenuLabel }}</span>
          </div>
        </div>

        <div class="content-body">
          <!-- 使用router-view显示子页面 -->
          <router-view v-if="$route.matched.length > 1"></router-view>

          <!-- 默认欢迎页面 -->
          <div v-else class="welcome-content">
            <h2>欢迎使用 ERP&MES 生产制造管理综合系统</h2>
            <p>请从顶部菜单选择功能模块开始使用</p>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const activeMainMenu = ref('')
const activeSubMenu = ref('')
const expandedMenus = ref<string[]>([])
const sidebarCollapsed = ref(false)
const searchText = ref('')
const pageSize = ref('5')

// 主菜单配置
const mainMenus = [
  { key: 'home', label: '主产' },
  { key: 'inventory', label: '库存' },
  { key: 'logistics', label: '物流' },
  { key: 'procurement', label: '采购' },
  { key: 'sales', label: '销售' },
  { key: 'finance', label: '财务' },
  { key: 'customer', label: '往来客户' },
  { key: 'warehouse', label: '仓储' },
  { key: 'project', label: '项目' },
  { key: 'approval', label: '审批' },
  { key: 'system', label: '数据看板' },
]

// 子菜单配置
const subMenus = ref({
  home: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: '/Warning', label: '天气预警', icon: '🏠' },
    { key: '/CS2', label: '智能客服', icon: '🏭' },
    { key: '/CS1', label: '委外加工', icon: '🔧' },
    { key: '/Unified_page', label: '委外工单', icon: '📄' },
    { key: 'quality', label: '质量管理', icon: '✅' },
    { key: 'mrp', label: 'MRP运算', icon: '📊' },
    { key: 'planning', label: '生产计划', icon: '📅' },
    {
      key: 'production',
      label: '内容生产',
      icon: '📋',
      children: [
        { key: 'www', label: '生产工单' },
        { key: 'about', label: '生产任务' },
        { key: 'production-report', label: '生产报告' }
      ]
    },
  ],
  inventory: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'stock-query', label: '库存查询', icon: '📦' },
    { key: 'stock-in', label: '入库管理', icon: '📥' },
    { key: 'stock-out', label: '出库管理', icon: '📤' },
    { key: 'stock-transfer', label: '库存调拨', icon: '🔄' }
  ],
  logistics: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'shipping', label: '发货管理', icon: '🚚' },
    { key: 'receiving', label: '收货管理', icon: '📦' },
    { key: 'transport', label: '运输管理', icon: '🚛' }
  ],
  procurement: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'purchase-order', label: '采购订单', icon: '📋' },
    { key: 'supplier', label: '供应商管理', icon: '🏢' },
    { key: 'procurement-plan', label: '采购计划', icon: '📅' }
  ],
  sales: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'sales-order', label: '销售订单', icon: '📄' },
    { key: 'customer-mgmt', label: '客户管理', icon: '👥' },
    { key: 'sales-report', label: '销售报表', icon: '📊' }
  ],
  finance: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'accounts', label: '财务账目', icon: '💰' },
    { key: 'budget', label: '预算管理', icon: '📈' },
    { key: 'cost-analysis', label: '成本分析', icon: '📊' }
  ],
  customer: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'customer-info', label: '客户信息', icon: '👤' },
    { key: 'customer-service', label: '客户服务', icon: '🎧' },
    { key: 'customer-feedback', label: '客户反馈', icon: '💬' }
  ],
  warehouse: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'warehouse-mgmt', label: '仓库管理', icon: '🏪' },
    { key: 'location-mgmt', label: '库位管理', icon: '📍' },
    { key: 'inventory-count', label: '库存盘点', icon: '📝' }
  ],
  project: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'project-mgmt', label: '项目管理', icon: '📁' },
    { key: 'task-mgmt', label: '任务管理', icon: '✅' },
    { key: 'project-report', label: '项目报告', icon: '📋' }
  ],
  approval: [
    { key: '/about', label: '工作台', icon: '🏠' },
    { key: 'pending-approval', label: '待审批', icon: '⏳' },
    { key: 'approved', label: '已审批', icon: '✅' },
    { key: 'approval-history', label: '审批历史', icon: '📚' }
  ],
  system: [
    { key: '/Progressboard', label: '工单执行进度看板', icon: '🔐' },
    { key: '/Workshop', label: '智能车间大屏', icon: '👥' },
  ]
})



// 计算属性
const activeMainMenuLabel = computed(() => {
  const menu = mainMenus.find(m => m.key === activeMainMenu.value)
  return menu?.label || ''
})

const activeSubMenuLabel = computed(() => {
  if (!activeMainMenu.value || !subMenus.value[activeMainMenu.value]) return ''

  const findInMenus = (menus: any[]): string => {
    for (const menu of menus) {
      if (menu.key === activeSubMenu.value) return menu.label
      if (menu.children) {
        const found = findInMenus(menu.children)
        if (found) return found
      }
    }
    return ''
  }

  return findInMenus(subMenus.value[activeMainMenu.value])
})

// 方法
const handleMainMenuClick = (key: string) => {
  activeMainMenu.value = key
  activeSubMenu.value = '/about'  // 自动选中工作台
  expandedMenus.value = []
  // 自动跳转到工作台页面
  router.push('/about')
}

const handleSubMenuClick = (item: any) => {
  if (item.children) {
    // 切换展开/折叠状态
    const index = expandedMenus.value.indexOf(item.key)
    if (index > -1) {
      expandedMenus.value.splice(index, 1)
    } else {
      expandedMenus.value.push(item.key)
    }
  } else {
    activeSubMenu.value = item.key
    // 如果是路由路径，进行路由跳转
    if (item.key.startsWith('/')) {
      // 特定页面在新标签页中打开
      if (item.key === '/Progressboard' || item.key === '/Workshop' || item.key === '/CS2') {
        const url = window.location.origin + item.key
        window.open(url, '_blank')
      } else {
        router.push(item.key)
      }
    }
  }
}

const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const handleLogout = () => {
  // 清除登录状态
  localStorage.removeItem('user')
  localStorage.removeItem('userInfo')
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('token')

  
  // 清除会话存储
  sessionStorage.removeItem('user')
  sessionStorage.removeItem('userInfo')
  sessionStorage.removeItem('isLoggedIn')
  sessionStorage.removeItem('token')
  
  // 跳转到登录页面
  router.push('/')
}

// 初始化
activeMainMenu.value = 'home'
activeSubMenu.value = 'production'
</script>

<style scoped>
.home-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* 顶部导航栏 */
.top-header {
  height: 60px;
  background: #1e88e5;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.main-nav {
  display: flex;
  gap: 20px;
}

.nav-item {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-item:hover,
.nav-item.active {
  background-color: rgba(255, 255, 255, 0.2);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 5px 15px;
}

.search-box input {
  background: none;
  border: none;
  color: white;
  outline: none;
  width: 200px;
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.3s;
  color: white;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.logout-icon {
  font-size: 16px;
  transform: rotate(90deg);
}

.logout-text {
  font-size: 14px;
}

.notification,
.user-avatar {
  font-size: 18px;
  cursor: pointer;
}

/* 主容器 */
.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧菜单栏 */
.sidebar {
  width: 250px;
  background: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  transition: width 0.3s;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 15px;
  border-bottom: 1px solid #e0e0e0;
}

.collapse-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
}

.sidebar-content {
  padding: 10px 0;
  overflow-y: auto;
  height: calc(100% - 50px);
}

.menu-item {
  margin: 2px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: #e3f2fd;
}

.menu-item.active>.menu-item-content {
  background-color: #1976d2;
  color: white;
}

.menu-item-content {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: 6px;
}

.menu-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.menu-label {
  flex: 1;
  margin-left: 10px;
  font-size: 14px;
}

.menu-arrow {
  font-size: 12px;
}

.submenu {
  margin-left: 30px;
  margin-top: 5px;
}

.submenu-item {
  padding: 8px 15px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.submenu-item:hover {
  background-color: #e8f4fd;
}

.submenu-item.active {
  background-color: #1976d2;
  color: white;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-header {
  height: 50px;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.breadcrumb {
  font-size: 14px;
  color: #666;
}

.content-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #fafafa;
}

/* 内容区域样式 */
.production-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.content-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary {
  background: #1976d2;
  color: white;
}

.btn-secondary {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

.data-table {
  overflow-x: auto;
  margin-bottom: 20px;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.data-table th {
  background: #f5f5f5;
  font-weight: 600;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.status-tag.pending {
  background: #fff3cd;
  color: #856404;
}

.btn-link {
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  margin-right: 10px;
  font-size: 14px;
}

.btn-link:hover {
  text-decoration: underline;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.page-controls {
  display: flex;
  gap: 5px;
}

.page-controls button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.page-controls button.active {
  background: #1976d2;
  color: white;
  border-color: #1976d2;
}

.welcome-content {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
}

.welcome-content h2 {
  color: #333;
  margin-bottom: 20px;
}

.welcome-content p {
  color: #666;
  font-size: 16px;
}
</style>
